<template>
  <div id="app">
       <el-button type="primary" @click="addUser()">新增</el-button>

     <!--新增编辑用户开始-->
    <el-dialog title="上传图片" :visible.sync="dialogFormVisible">
          <el-upload
            class="avatar-uploader"
            ref="upload1"
            action=""
            :auto-upload="false"
            :limit="1 "
            multiple
            accept="application/jpg"
            :file-list="fileList"
            list-type="picture"
            :on-change="handlerChange"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOrUpdateUser()">确 定</el-button>
      </div>
    </el-dialog>
    <!--新增编辑用户结束-->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dialogFormVisible:false,
      fileList:[],
      imageUrl:''
    }
  },methods: {
    addUser(){
      this.dialogFormVisible =true;
      this.fileList = [{name:'1.jpg',url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514093920321&di=913e88c23f382933ef430024afd9128a&imgtype=0&src=http%3A%2F%2Fp.3761.com%2Fpic%2F9771429316733.jpg"}];
    },addOrUpdateUser(){
       var formData = new FormData();
          //将原来form 的值添加到 formData中
          for(var o in this.form){
            formData.append(o,this.form[o]);
          }
          this.fileList.forEach(function(file){
              formData.append('files',file.raw,file.name);
          });
            //设置图片上传的格式
          let config = {
            "Content-Type": "multipart/form-data"
          };

          console.log("formData----------------->",formData);
          for(var key of formData.keys()){
               console.log("key:{},value:{}",key,formData.get(key));
          }
    }, handlerChange(file,files){
      console.log(file,files);
      this.fileList = files;
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>